<style>
	html,body{
		margin: 0;
		padding:0;
	}
</style>
<style scoped>
	.form{
		width: 96%;
    margin-left: 2%;
	}
	.campName{
		width: 100%;
    height: 2em;
    font-size: 1.5em;
    border: 0;
    margin: 1em auto;
	}
	.campName::-webkit-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.campName::-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.campName:-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.campName::-ms-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}

	.count{
		display: inline-block;
		width: 40%;
		margin-top: 15px;
	}
	.count>img {
    vertical-align: top;
	}
	.count>input{
    width: 70%;
    margin-left: 5%;
    height: 24px;
    display: inline-block;
    vertical-align: top;
    border:0;
	}
	.count>input::-webkit-input-placeholder{
		font-size: 12px;
		color:#D9D9D9;
	}
	.count>input::-moz-placeholder{
		font-size: 12px;
		color:#D9D9D9;
	}
	.count>input:-moz-placeholder{
		font-size: 12px;
		color:#D9D9D9;
	}
	.count>input::-ms-input-placeholder{
		font-size: 12px;
		color:#D9D9D9;
	}

	.season{
		display: inline-block;
		width: 60%;
	}
	.season>input{
    text-indent: .1em;
    width: 70%;
    margin-left: 5%;
    border:0;
	}
	.season>input::-webkit-input-placeholder{
		font-size: 12px;
		color:#D9D9D9;
	}
	.season>input::-moz-placeholder{
		font-size: 12px;
		color:#D9D9D9;
	}
	.season>input:-moz-placeholder{
		font-size: 12px;
		color:#D9D9D9;
	}
	.season>input::-ms-input-placeholder{
		font-size: 12px;
		color:#D9D9D9;
	}

	.summary{
		width: 100%;
    height: 2em;
    font-size: 1.5em;
    border: 0;
	}
	.summary::-webkit-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.summary::-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.summary:-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.summary::-ms-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}

	.tips{
		width: 100%;
    height: 2em;
    font-size: 1.5em;
    border: 0;
	}
	.tips::-webkit-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.tips::-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.tips:-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.tips::-ms-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}

	.line{
		width: 100%;
    height: 2em;
    font-size: 1.5em;
    border: 0;
	}
	.line::-webkit-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.line::-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.line:-moz-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	.line::-ms-input-placeholder{
		font-size: 1em;
		color:#D9D9D9;
	}
	
	button.sendcamp {
		position: relative;
    background: #FD8C25;
    width: 100%;
    border: 0px solid red;
    height: 48px;
    color: #fff;
    font-size: 24px;
	}	
	.mymap {
		width: 100%;
		height: 60%;
    margin-top: 1em;
	}
	.uploadpic{
		position: relative;
		display: inline-block;
	}
	
</style>
<template>
	<div class="form">
		<input v-model="name" type="text" class="campName" placeholder="输入营地名称...">
		<div class="uploadpic">
			<uploadpic></uploadpic>
		</div>
		<hr>
		<div>
			<div class="count">
				<img src="../resource/images/camp/send_number_camp.png" width="24" height="24" alt=""><input v-model="campcount" type="number" placeholder="营地数量是多少">
			</div><!-- 
			 --><div class="season">
				<img src="../resource/images/camp/send_best_season.png" width="24" height="24" alt=""><input v-model="bestseason" type="text" placeholder="最佳季节是什么时候" maxlength="4">
			</div>
		</div>
		<hr>
		<input v-model="desc" type="text" class="summary" placeholder="简介..."> 
		<hr>
		<input v-model="attention" type="text" class="tips" placeholder="重要提醒...">
		<hr>
		<input v-model="line" type="text" class="line" placeholder="线路...">
		
	</div>
	<div class="mymap">
		<mymap></mymap>
	</div>
	<button class="sendcamp" @click="sendcamp">发布</button>
</template>
<script>
	var wxinfo = JSON.parse(window.localStorage.getItem("user"));
	// var wxinfo = {
 //    "city" : "Guangzhou",
 //    "country" : "China",
 //    "docName" : "wechatinfo",
 //    "headimgurl" : "http://wx.qlogo.cn/mmopen/haLXPxUe5Me5DfKm5aDhzXB6fykty6zricicWmhickTA5lX0MG4hADVH5icWrtZkGyBTPGNvuSicRm7DVFyNuK22nq3xVpMicweJhK/0",
 //    "language" : "zh_CN",
 //    "nickname" : "Kevin💓",
 //    "openid" : "o0SZIv7iyaCuLRrAwOYfSqzpNxtg",
 //    "province" : "Guangdong",
 //    "subscribe" : 1,
	// };

	var uploadpic = require("../component/public/uploadpic.vue");
	var mapinsert = require("../component/public/mapinsert.vue");
	var mymap = require("../component/map.vue");
	var validator = require('validator');
	module.exports = {
		data:function(){
			return {
				url:"/camp/place/setInfo",
				name:"",
				campcount:"",
				bestseason:"",
				desc:"",
				line:"",
				address:"",
				attention:"",
				image_serverIds:[],
			}
		},
		methods:{
			sendcamp:function(){
				var info = {};
				var vue = this;
				info.name = this.name;
				info.campcount = this.campcount;
				info.bestseason = this.bestseason;
				info.desc = this.desc;
				info.tips = this.tips;
				info.line = this.line;
				info.ownerId = wxinfo.openid;
				info.address = this.address;
				info.attention = this.attention;
				info.serverIds = this.image_serverIds;
				if(!this.validate()){
					this.$http.post(vue.url,info).then(function(res){
						alert('营地发布成功')
					},function(err){
						alert('营地发布失败')
						console.log(err);
					});
				}
				
			},
			validate:function(){
				if(validator.isEmpty(this.name)){
					alert("营地名称不能为空");
					return false;
				}
				if(validator.isEmpty(this.campcount)){
					alert("营地数量不能为空");
					return false;
				}
				if(validator.isEmpty(this.bestseason)){
					alert("最佳季节不能为空");
					return false;
				}
				if(validator.isEmpty(this.desc)){
					alert("简介不能为空");
					return false;
				}
				if(validator.isEmpty(this.attention)){
					alert("重要提醒不能为空");
					return false;
				}
				if(validator.isEmpty(this.line)){
					alert("线路不能为空");
					return false;
				}
			}
		},
		events:{
			afterChooseImages:function(_jssdk,localIds){
				var that = this;
				_jssdk.uploadImages(localIds,function(serverIds){
					that.image_serverIds = serverIds;
				});
			}
		},
		components:{
			uploadpic:uploadpic,
			mymap:mymap
		}
	}
</script>